<%@ page language="java" contentType="text/html; charset=UTF-8" isErrorPage="true" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="pagePath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pagePath}/page/static/css/reset.css">
<link rel="stylesheet" type="text/css" href="${pagePath}/page/static/css/main.css">
<script type="text/javascript" src="${pagePath}/page/static/js/jquery-1.12.4.min.js"></script>
<title>校园二手交易网-个人中心</title>
<style>
 .main_star {
  padding-left: 0;
  overflow: hidden;
 }
 .main_star li {
  float: left;
  list-style: none;
  width: 27px;
  height: 27px;
  background: url(${pagePath}/page/static/images/star.gif)
 }
 .main_star  li a {
  display: block;
  width: 100%;
  padding-top: 27px;
  overflow: hidden;
 }
 .main_star  li.light {
  background-position: 0 -29px;
 }
 </style>
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到 校园二手交易网！</div>
			<div class="fr">
				<div class="user_link fl">
					<c:if test="${!empty loguser}">
						欢迎您：<em style="color: red;">${loguser.username}</em>
						<span>|</span>
						<a href="${pagePath}/logout.do">退出</a>
					</c:if>
				</div>
				<div class="login_btn fl">
					<c:if test="${empty loguser}">
						<a href="${pagePath}/login.do">登录</a>
						<span>|</span>
						<a href="${pagePath}/register.do">注册</a>
					</c:if>
				</div>
			</div>
		</div>
	</div>
	<div class="search_bar clearfix">
		<a href="${pagePath}/index.do" class="logo fl"><img src="${pagePath}/page/static/images/logo.png"></a>
		<div class="sub_page_name fl">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;个人中心</div>
		<div class="search_con fr">
			<form action="${pagePath}/goods.do">
				<input type="text" class="input_text fl" id="key" name="key" placeholder="搜索商品" required="required"> <input type="submit" class="input_btn fr" value="搜索">
			</form>
		</div>
	</div>
	<div class="navbar_con">
		<div class="navbar">
			<h1 class="fl">个人中心</h1>
			<ul class="navlist fl">
				<li><a href="${pagePath}/index.do" class="active">商品区</a></li>
				<li class="interval">|</li>
				<li><a href="${pagePath}/index_task.do">任务区</a></li>
				<li class="interval">|</li>
				<li><a href="${pagePath}/personal_info.do">个人中心</a></li>
				<li class="interval">|</li>
				<li><a href="${pagePath}/cart.do">购物车</a></li>
			</ul>
		</div>
	</div>
	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<ul style="padding-top: 30px;">
				<li><a href="${pagePath}/personal_info.do">· 个人信息</a></li>
				<li><a href="${pagePath}/personal_order.do" class="active">· 全部订单</a></li>
				<li><a href="${pagePath}/personal_address.do">· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
			<h3 class="common_title2">评价信息</h3>
			<div>
				<form action="">
					<input type="hidden" id="orderId" name="orderId" value="${orderId }">
					<label>星级:</label><br><br>
					<ul class="main_star" id="star_ul">
					  <li class="light"><a href="javascript:;">1</a></li>
					  <li><a href="javascript:;">2</a></li>
					  <li><a href="javascript:;">3</a></li>
					  <li><a href="javascript:;">4</a></li>
					  <li><a href="javascript:;">5</a></li>
					 </ul>
					 <label>内容:</label>
					 <textarea rows="5" cols="20" id="content"></textarea><br><br>
					 <button type="button" onclick="saveAppraise()">提交</button>
				</form>
			</div>
		</div>
	</div>
	<jsp:include page="footer.jsp"></jsp:include>
	<script type="text/javascript">
		var num=finalnum = tempnum= 0;
		var temp = document.getElementById('star_ul')
		var lis = temp.getElementsByTagName("li");
		//num:传入点亮星星的个数
		//finalnum:最终点亮星星的个数
		//tempnum:一个中间值
		function fnShow(num) {
		 finalnum= num || tempnum;//如果传入的num为0，则finalnum取tempnum的值
		 for (var i = 0; i < lis.length; i++) {
		  lis[i].className = i < finalnum? "light" : "";//点亮星星就是加class为light的样式
		 }
		}
		for (var i = 1; i <= lis.length; i++) {
		 lis[i - 1].index = i;
		 lis[i - 1].onmouseover = function() { //鼠标经过点亮星星。
		  fnShow(this.index);//传入的值为正，就是finalnum
		 }
		 lis[i - 1].onmouseout = function() { //鼠标离开时星星变暗
		  fnShow(0);//传入值为0，finalnum为tempnum,初始为0
		 }
		 lis[i - 1].onclick = function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星
		  tempnum= this.index;
		 }
		}
		
		function saveAppraise(){
			
			var orderId = $("#orderId").val();
			var content = $("#content").val();
			
			window.location.href = '${pagePath}/add_appraise.do?orderId=' + orderId + '&star_count=' + finalnum +
					'&content=' + content;
			
		}
		
	</script>
</body>
</html>